<template>
  <div class="role-outer">
    <!-- 搜索版块 -->
    <div class="search_box">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="歌单名">
          <el-input placeholder="查询歌单" v-model="searchInfo" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button
            type="primary"
            @click="
              () => {
                searchInfo = '';
                set();
              }
            "
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="list_box_but1">
      <el-button type="primary" @click="add">新增歌单</el-button>
      <el-button type="primary" @click="deleteAll">批量删除</el-button>
    </div>

    <div class="list_box1">
      <div class="list_table">
        <el-table
          size="small"
          :data="data"
          :height="tableHeight"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="{ background: '#EEF1F6' }"
        >
          <el-table-column
            type="selection"
            width="40"
            align="center"
          ></el-table-column>
          <el-table-column
            label="ID"
            prop="id"
            width="50"
            align="center"
          ></el-table-column>
          <el-table-column label="歌单图片" width="110" align="center">
            <template v-slot="scope">
              <img :src="getUrl(scope.row.picUrl)" style="width: 80px" />
              <el-upload
                ref="uploadRef"
                class="upload"
                :action="getUrl('/mv/upload')"
                :data="{ type: 'songList' }"
                :auto-upload="true"
                :show-file-list="false"
                :on-success="(response:any) => updateInfo(response, scope.row.id)"
              >
                <el-button>更新图片</el-button>
              </el-upload>
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
            width="200"
          ></el-table-column>
          <el-table-column label="简介">
            <template v-slot="scope">
              <el-scrollbar height="100px">
                <p>
                  {{ scope.row.introduction }}
                </p>
              </el-scrollbar>
            </template>
          </el-table-column>
          <el-table-column
            label="风格"
            prop="style"
            width="100"
          ></el-table-column>
          <el-table-column label="操作" width="160" align="center">
            <template v-slot="scope">
              <el-button @click="editRow(scope.row)">编辑</el-button>
              <el-button type="danger" @click="deleteRow(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="list_pagination">
      <el-pagination
        class="pagination"
        background
        layout="total, prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <!-- 内容版块 -->
    <!-- 删除一个数据 -->
    <Deldialog
      :delVisible="delVisible"
      @confirm="confirm"
      @cancelRow="delVisible = $event"
      @closeDialog="closeDialog"
    />
    <!-- 批量删除多个数据 -->
    <Deldialog
      :delVisible="delAllVisible"
      @confirm="confirmAll"
      @cancelRow="delAllVisible = $event"
      @closeDialog="closeAllDialog"
    />
    <!--添加歌单-->
    <el-dialog
      title="添加歌单"
      v-model="addVisible"
      @close="clearInfo"
      :destroy-on-close="true"
    >
      <el-form ref="formRef" label-width="100px" :model="registerForm">
        <el-form-item
          label="歌单名"
          prop="title"
          :rules="{
            required: true,
            message: '歌单名不能为空',
            trigger: 'blur',
          }"
        >
          <el-input v-model="registerForm.title"></el-input>
        </el-form-item>
        <el-form-item
          label="歌单介绍"
          prop="introduction"
          :rules="{
            required: true,
            message: '歌单介绍不能为空',
            trigger: 'blur',
          }"
        >
          <el-input v-model="registerForm.introduction"></el-input>
        </el-form-item>
        <el-form-item
          label="风格"
          prop="style"
          :rules="{
            required: true,
            message: '风格不能为空',
            trigger: 'blur',
          }"
        >
          <el-input v-model="registerForm.style"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit(formRef)">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" v-model="editVisible" :destroy-on-close="true">
      <el-form :model="editForm">
        <el-form-item label="标题">
          <el-input v-model="editForm.title"></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input type="textarea" v-model="editForm.introduction"></el-input>
        </el-form-item>
        <el-form-item label="风格">
          <el-input v-model="editForm.style"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive } from "vue";
import {
  getAllPlayList,
  delPlayList,
  delPlayLists,
  addPlayList,
  updatePlayList,
} from "@/api";
import { getUrl } from "@/utils copy/format";
const tableData = ref([]); // 记录歌曲，用于显示
const currentPage = ref(1);
const pageSize = ref(10);
const formRef = ref<FormInstance>();
const searchInfo = ref("");
const data = ref([]);
const tableHeight = ref(0);
tableHeight.value = window.innerHeight - 205;
async function handleSearch() {
  currentPage.value = 1;
  tableData.value = data.value = await getAllPlayList(searchInfo.value.trim());
}
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  getData();
};
const handleCurrentChange = (val: any) => {
  currentPage.value = val;
  console.log(`current page: ${val}`);
  getData();
};
function handleSelectionChange(val: any) {
  multipleSelection.value = val;
}
function getData() {
  searchInfo.value = "";
  data.value = tableData.value.slice(
    (currentPage.value - 1) * pageSize.value,
    currentPage.value * pageSize.value
  );
}
async function updateInfo(response: any, id: number) {
  await updatePlayList({ id, picUrl: response.data });
  set();
}
async function set() {
  currentPage.value = 1;
  tableData.value = [];
  const singers = await getAllPlayList("");
  tableData.value = singers;
  getData();
}
onMounted(() => {
  set();
});

//添加删除功能
import Deldialog from "@/views/components/Deldialog.vue";
const multipleSelection = ref([]); // 记录当前要删除的列表
const multipleSelectionId = ref({}); // 记录当前要删除的列表的用户id
const delVisible = ref(false); // 显示删除框
const delAllVisible = ref(false); // 显示批量删除框
const idx = ref(-1); // 记录当前要删除的行
function deleteRow(id: number) {
  idx.value = id;
  delVisible.value = true;
  console.log("运行过了", delVisible);
}
async function confirmAll() {
  const success = await delPlayLists(multipleSelectionId.value);
  if (success) {
    set();
    ElMessage.success("批量删除用户成功");
  } else {
    ElMessage.error("删除失败");
  }
  delAllVisible.value = false;
}
function closeAllDialog() {
  delAllVisible.value = false;
}
async function confirm() {
  const success = await delPlayList(idx.value);
  console.log("confirm运行了");
  if (success) {
    set();
    ElMessage.success("删除成功");
  } else {
    ElMessage.error("删除失败");
  }
  delVisible.value = false;
}
function closeDialog() {
  delVisible.value = false;
}

//删除所有选中数据
function deleteAll() {
  multipleSelectionId.value = [];
  for (let item of multipleSelection.value) {
    multipleSelectionId.value.push(item.id);
  }
  delAllVisible.value = true;
  console.log("批量" + delAllVisible.value + multipleSelectionId.value);
}

//实现添加、音乐
//这里是添加用户的信息
import type { FormInstance } from "element-plus";
const addVisible = ref(false);
function add() {
  addVisible.value = true;
}
import { ElMessage } from "element-plus";
//添加歌曲信息
const registerForm = reactive({
  title: "",
  introduction: "",
  style: "",
});

const submit = (formEl: any) => {
  if (!formEl) return;
  formEl.validate(async (valid: any) => {
    if (valid) {
      const res = await addPlayList(registerForm);
      set();
      addVisible.value = false;
      if (res) {
        ElMessage.success("修改成功");
      }
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
const clearInfo = () => {
  registerForm.title = "";
  registerForm.introduction = "";
  registerForm.style = "";
};
/**
 * 编辑
 */
const editVisible = ref(false);
const editForm = reactive({
  id: 0,
  title: "",
  picUrl: "",
  introduction: "",
  style: "",
});

function editRow(row: any) {
  idx.value = row.id;
  editForm.id = row.id;
  editForm.title = row.title;
  editForm.picUrl = row.picUrl;
  editForm.introduction = row.introduction;
  editForm.style = row.style;
  editVisible.value = true;
}

async function saveEdit() {
  let id = editForm.id;
  let title = editForm.title;
  let introduction = editForm.introduction;
  let style = editForm.style;
  const success = await updatePlayList({
    id: id,
    title: title,
    introduction: introduction,
    style: style,
  });
  if (success) {
    ElMessage.success("修改成功");
    editVisible.value = false;
    set();
  } else {
    ElMessage.error("出错啦，修改失败");
  }
}
</script>
<style lang="scss" scoped>
@import "@/static/css/common.scss";

svg {
  width: 14px;
  height: 14px;
  fill: #fff;
  margin-right: 4px;
}

:deep(.el-table__cell) {
  border-bottom: none !important;
}

.inner_icon {
  fill: #4d70ff;
  margin-right: 2px;
}

.inner_icon:hover {
  fill: #2d56fa;
}

.role-outer {
  padding-bottom: 10px;
}

.list_box1 {
  text-indent: 0;
  background: #fff;
  border-radius: 4px;
  overflow: auto;
}
.list_box_but,
.list_table {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
.list_box_but1 {
  position: absolute;
  top: 18px;
  right: 30px;
}
.list_box_but a {
  color: #fff;
}
.list_pagination {
  //padding-top: 14px;
  text-indent: 0;
  > div {
    justify-content: flex-end;
    margin-right: 20px;
  }
}
</style>
